<template>
  <el-form 
    class="form"
    size="mini"
    ref="form"
    :model="form"
    label-width="75px"
    label-position="left">
    <el-form-item :label="$t('开始日期')">
      <el-date-picker
        :disabled="form.keep === 1"
        class="input-width"
        :placeholder="$t('选择日期')"
        value-format="yyyy-MM-dd"
        :picker-options="{
          disabledDate(time) {
            return time.getTime() > new Date(form.endDate).valueOf();
          }
        }"
        v-model="form.startDate"></el-date-picker>
    </el-form-item>
    <el-form-item :label="$t('结束日期')">
      <el-date-picker
        :disabled="form.keep === 1"
        class="input-width"
        :placeholder="$t('选择日期')"
        value-format="yyyy-MM-dd"
        :picker-options="{
          disabledDate(time) {
            return time.getTime() < new Date(form.startDate).valueOf() - 86400000;
          }
        }"
        v-model="form.endDate"></el-date-picker>
    </el-form-item>
    <el-form-item :label="$t('长期有效')">
      <el-checkbox
        v-model="form.keep"
        :true-label="1"
        :false-label="0"
        @change="keepChange"></el-checkbox>
    </el-form-item>
    <el-form-item :label="$t('发布类型')">
      <el-select
        class="input-width"
        v-model="form.publishType">
        <el-option
          v-for="(op) in publishTypeArr"
          :key="op.value"
          :value="op.value"
          :label="op.name"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item :label="$t('选择星期')">
      <el-select
        class="input-width"
        v-model="form.week"
        multiple
        collapse-tags>
        <el-option
          v-for="(op) in weekArr"
          :key="op.value"
          :value="op.value"
          :label="$t(op.name)"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item :label="$t('忽略终端下载')" label-width="103px">
      <el-checkbox
        :disabled="form.keep === 1"
        v-model="form.ignoreDownload"
        :true-label="1"
        :false-label="0"></el-checkbox>
    </el-form-item>
    <el-form-item :label="$t('设置发布时间')" label-width="103px">
      <el-checkbox
        :disabled="form.keep === 1"
        v-model="form._preloadDateBool"></el-checkbox>
    </el-form-item>
    <el-form-item label-width="0">
      <el-date-picker
        :disabled="!form._preloadDateBool || form.keep === 1"
        class="full-width"
        :placeholder="$t('选择日期')"
        value-format="yyyy-MM-dd"
        v-model="form._preloadDatetimeDate"></el-date-picker>
    </el-form-item>
    <el-form-item label-width="0">
      <el-time-picker
        :disabled="!form._preloadDateBool || form.keep === 1"
        class="full-width"
        :placeholder="$t('选择时间')"
        value-format="HH:mm:ss"
        v-model="form._preloadDatetimeTime"></el-time-picker>
    </el-form-item>
    
    <slot></slot>   
  </el-form>
</template>

<script>
import { weekArray } from '@/const/index.js'
export default {
  props: {
    form: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      publishTypeArr: [
        {value: 1, name: '常规'}
      ],
      weekArr: weekArray
    }
  },
  mounted() {
    this.$nextTick(function() {
      const bool = this.$checkOperationPermission('MEDIA_SCHEDULE_URGENT')
      if(bool) {
        this.publishTypeArr =[
          {value: 1, name: '常规'},
          {value: 2, name: '紧急'}
        ]
      }
    })
  },
  methods: {
    keepChange(v) {
      if (v === 1) {
        this.form.publishType = 1
        this.form.startDate = this.$moment(0).format('YYYY-MM-DD')
        this.form.endDate = this.$moment().format('2037-12-31')
      } else {
        this.form.startDate = this.$moment().format('YYYY-MM-DD')
        this.form.endDate = this.$moment().add(7, 'day').format('YYYY-MM-DD')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.form {
  width:auto;
  margin: 15px 15px 0 15px;

  .el-form-item {
    margin-bottom: 10px;
  }

  .mr-16 {
    margin-right: 16px;
  }

  .input-width {
    width: 175px;
  }
  .full-width {
    width: 249px;
  }
  .half-input {
    width: 80px;
  }
  .flex {
    display: flex;
    align-items: center;
  }
}
</style>